<%-- 
    Document   : forum_user_supervise
    Created on : 2017-7-14, 13:42:13
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="UTF-8"?><!--这句话不知道会不会有影响-->

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:v="urn:schemas-microsoft-com:vml"><!--    添加html的两个属性-->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <script type="text/javascript" charset="UTF-8" src="echartsjs/echarts.min.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/jquery-2.1.4.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/ext-bootstrap.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/ext-all.js"></script>
            <script type="text/javascript" charset="UTF-8" src="echartsjs/ext-all-debug.js"></script>
    </head>
    <body>
        <input id="forum_type" value="${forum_type}" style="display: none">
            <div style="text-align:center">
                <div id="main_forum_user_daily" style="width: 800px;height:420px;margin:0 auto"></div>
                <div id="main_forum_user_month" style="width: 800px;height:420px;margin:0 auto"></div>
                <div id="trunk" name="trunk" style="display: none">${trunk}</div>
            </div>
            <script type="text/javascript">
                function getTypeVal() {
                    var val = document.getElementById("forum_type").value;
                    //                alert("forumtype:" + val);
                    return val;
                }
                function getTypeName() {
                    var name = "";
                    var val = document.getElementById("forum_type").value;
                    if (val === "tianya") {
                        name = "天涯用户数据";
                    }
                    if (val === "aikaqiche") {
                        name = "爱卡汽车用户数据";
                    }
                    if (val === "kaidi") {
                        name = "凯迪用户数据";
                    }
                    if (val === "qiangguo") {
                        name = "强国用户数据";
                    }
                    if (val === "tiexue") {
                        name = "铁血用户数据";
                    }
                    if (val === "zhonghua") {
                        name = "中华用户数据";
                    }
                    if (val === "tianya_head") {
                        name = "天涯头像下载数据";
                    }
                    if (val === "kaididi_head") {
                        name = "凯迪头像下载数据";
                    }
                    if(val ==="qiangguo_head"){
                        name="强国头像下载"
                    }
                    if(val ==="aikaqiche_head"){
                        name="爱卡汽车头像下载"
                    }
                    if(val ==="tiexue_head"){
                        name="铁血头像下载"
                    }
                    if(val ==="baidu_head"){
                        name="百度头像下载"
                    }
                    return name;
                }
//                function getDatatype
            </script>
            <script type="text/javascript">
                var trunk = document.getElementById("trunk").innerHTML;
                var myChart = echarts.init(document.getElementById('main_forum_user_daily'));
                myChart.setOption({
                    title: {
                        subtext: getTypeName() + '每日接入和入库量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100000
                    },
                    legend: {
                        data: ['接入量', '接入增量', "入库量", "入库增量"]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            //                        boundaryGap: true,
                            data: [],
                            axisLabel: {
                                //X轴刻度配置
                                interval: "auto" //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            }
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: [],
                            itemStyle: {
                                normal: {color: 'yellowgreen'}
                            },
                        },
                        {
                            type: 'category',
                            //                        boundaryGap: true,
                            data: [],
                            itemStyle: {
                                normal: {color: 'chartreuse'}
                            },
                            axisLabel: {
                                //X轴刻度配置
                                interval: "auto" //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            }
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: [],
                            itemStyle: {
                                normal: {color: 'tomato'}
                            },
                            axisLabel: {
                                //X轴刻度配置
                                interval: "auto" //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                            }
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '接入量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        }
                        ,
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '接入增量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '入库量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '入库增量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        }
                    ],
                    series: [
                        {
                            name: '接入量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: [],
                            itemStyle: {
                                normal: {color: 'yellowgreen'}
                            },
                        },
                        {
                            name: '接入增量',
                            type: 'line',
                            data: []
                        },
                        {
                            name: '入库量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: [],
                            itemStyle: {
                                normal: {color: 'tomato'}
                            },
                        },
                        {
                            name: '入库增量',
                            type: 'line',
                            data: []
                        }
                    ]
                });
                $.ajax({
                    type: "post",
                    async: false, //同步执行  
                    url: "baidu_weekData.htm",
                    data: {data_type: "forum_" + getTypeVal() + "_user_jr_datasize_", msgData: trunk, data_mpp: "forum_" + getTypeVal() + "_user_mpp_datasize_"}, //根据data中的字段区分是吧数据还是用户数据
                    dataType: "html", //返回数据形式为json  
                    success: function (result) {
                        var data = JSON.parse(result);
                        myChart.setOption({
                            xAxis: [
                                {
                                    data: data.categories
                                },
                                {
                                    data: data.categories
                                },
                                {
                                    data: data.categories
                                },
                                {
                                    data: data.categories
                                }
                            ],
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: '接入量',
                                    data: data.data
                                },
                                {
                                    // 根据名字对应到相应的系列
                                    name: '接入增量',
                                    data: data.incr
                                },
                                {
                                    // 根据名字对应到相应的系列
                                    name: '入库量',
                                    data: data.mpp
                                },
                                {
                                    // 根据名字对应到相应的系列
                                    name: '入库增量',
                                    data: data.mppincr
                                },
                            ]
                        });
                    },
                    error: function (errorMsg) {
                        alert("图表请求数据失败啦!");
                    }
                });

            </script>
            <script type="text/javascript">

                var myChart = echarts.init(document.getElementById('main_forum_user_month'));
                myChart.setOption({
                    title: {
                        subtext: getTypeName() + '每月接入量和入库量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100000
                    },
                    legend: {
                        data: ['接入量', '接入增量', "入库量", "入库增量"]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: [],
                            axisLabel: {
                                //X轴刻度配置
                                interval: "auto", //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                                rotate: -30, //文字倾斜一定角度显示，用于下标过多的情况
                            }
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: [],
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: [],
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '数据量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '接入增量',
                            //                        min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '入库量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            //                        name: '入库曾量',
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                    ],
                    series: [
                        {
                            name: '接入量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: [],
                            itemStyle: {
                                normal: {color: 'yellowgreen'}
                            },
                        },
                        {
                            name: '接入增量',
                            type: 'line',
                            data: []
                        },
                        {
                            name: '入库量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: [],
                            itemStyle: {
                                normal: {color: 'tomato'}
                            }
                        },
                        {
                            name: '入库增量',
                            type: 'line',
                            data: []
                        }
                    ]
                });
                $.ajax({
                    type: "post",
                    async: false, //同步执行  
                    url: "baidu_monthData.htm",
                    data: {data_type: "forum_" + getTypeVal() + "_user_jr_datasize_",monthData: trunk, data_mpp: "forum_" + getTypeVal() + "_user_mpp_datasize_"},
                    dataType: "html", //返回数据形式为json  
                    success: function (result) {
                        var data = JSON.parse(result);
                        myChart.setOption({
                            xAxis: [
                                {
                                    data: data.categories
                                },
                                {
                                    data: data.categories
                                },
                                {
                                    data: data.categories
                                },
                                {
                                    data: data.categories
                                }

                            ],
                            series: [
                                {
                                    // 根据名字对应到相应的系列
                                    name: '接入量',
                                    data: data.data
                                },
                                {
                                    // 根据名字对应到相应的系列
                                    name: '接入增量',
                                    data: data.incr
                                },
                                {
                                    // 根据名字对应到相应的系列
                                    name: '入库量',
                                    data: data.mpp
                                },
                                {
                                    // 根据名字对应到相应的系列
                                    name: '入库增量',
                                    data: data.mppincr
                                }
                            ]
                        });
                    },
                    error: function (errorMsg) {
                        alert("图表请求数据失败啦!");
                    }
                });

            </script>
    </body>
</html>

